<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>均分1</title> 
        <style>   
		body,p{margin: 0;}   
		.parentWrap{   
		    overflow: hidden;   
		}   
		.parent{   
		    overflow: hidden;
		    padding:10px 20px;     
		}   
		.child{   
		    float: left;   
		    width: calc((100% - 60px)/4);
		    /*width: calc((100% - 20px)/4);*/
		    /*width: 25%;*/
		    box-sizing: border-box;    
		}   
		.in{   
		    margin-right: 20px;   
		    height: 100px;
		    border:1px solid #f00;   
		}
		.childLine {   
		    float: left;
		    width:20px;
		}  
		</style>  
    </head> 
    <body> 
        <div class="parentWrap">  
		    <div class="parent" style="background-color: lightgrey;">  
		        <div class="child" style="background-color: blue;">  
		            <div class="in" style="background-color: lightblue;">1</div>  
		        </div>  
		        <div class="childLine"></div>
		        <div class="child" style="background-color: green;">  
		            <div class="in" style="background-color: lightgreen;">2</div>  
		        </div> 
		        <div class="childLine"></div> 
		        <div class="child" style="background-color: orange;">  
		            <div class="in" style="background-color: lightsalmon;">3</div>  
		        </div> 
		        <div class="childLine"></div> 
		        <div class="child" style="background-color: red;">  
		            <div class="in" style="background-color: pink;">4</div>  
		        </div>                   
		    </div>       
		</div>  
    </body> 
</html>





 